import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

// 自定义组件
// 自定义组件为函数就行，不限制函数的类型
function Button() {
  return <button>click me</button>
}
function List() {
  return (
    <div>
      <div>坚持就是胜利</div>
      <div>成功来自于365天乒乒乓乓的日常</div>
      <div>今天的太阳比昨天大</div>
    </div>
  )
}

// App.jsx ——>  main.jsx ——>  index.html

function App() {
  const name = 'sys'
  function getName() {
    return 'wwx'
  }
  const list = [
    { name: '111', value: 1 },
    { name: '222', value: 2 },
    { name: '333', value: 3 },
  ]
  let flag = true
  // 定义文章类型
  const articleType = 1
  // 根据文章类型返回不同的jsx模板
  function getArticleTem() {
    if (articleType == 1) {
      return <div>无图文章</div>
    } else if (articleType == 2) {
      return <div>单图文章</div>
    } else {
      return <div>多图文章</div>
    }
  }
  // function clickHanlder(){
  //   console.log('按钮点击');
  // }
  // const clickHanlder = (e)=>{
  //   // 参数e 事件对象
  //   console.log('点击',e)
  // }
  const clickHanlder = (name, e) => {
    // 自定义传参name
    console.log('点击', name, e)
  }

  // 调用useState添加一个状态变量
  // useState(5)传入的值为count的初始值
  const [count, setCount] = useState(5)
  // 点击事件回调
  const handlerclick = () => {
    // 调用传入的count和setCount修改count值
    // 将count的值修改为count+1
    // 视图中
    setCount(count + 1)
  }
  // 状态不可变，只能替换不能修改
  // 只有使用状态数据count匹配的setCount传递新值，在内部自动将新值替换count的旧值，视图上数据会同步更新
  // 若在其他方法中直接修改count则视图不会同步更新

  // 状态对象
  const [from, setFrom] = useState({ name: 'sys' })
  const clickForm = () => {
    setFrom({
      ...from,
      name: 'wwx',
    })
  }
  // 直接修改视图不会同步更新
  function changeFrom() {
    from.name = 'wwx'
  }
  const style = {
    fontSize: '18px', //多单词不能使用-，而需要驼峰写法
    color: 'red',
  }
  return (
    <>
      <div>
        {/* 在jsx中使用js表达式，使用{}包裹 */}
        {/* 仅支持表达式，不支持语句 比如if等 */}
        {/* 字符串 */}
        {123}
        {/* 变量 */}
        {name}
        {/* 函数调用 */}
        {getName()}
        {/* 方法调用 */}
        {new Date().getHours()}
        {/* 对象 */}
        <div style={{ color: 'red' }}>this is a test example</div>
        {/* 渲染列表 */}
        {/* 要循环哪个结构，就return哪个结构，需要添加独一无二的key值（number或string) */}
        <div>
          <ul>
            {list.map((item) => {
              // key的作用：React内部使用，用于提升更新性能
              return <li key={item.name}>{item.value}</li>
            })}
          </ul>
        </div>
        {/* 条件渲染 */}
        {/* 逻辑与 */}
        {flag && <div>通过flag和逻辑与判断显示</div>}
        {/* 三元运算 */}
        {flag ? (
          <a href="https://vite.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
        ) : (
          <a href="https://react.dev" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
        )}
        {/* 复杂情况实现条件渲染 */}
        {/* 自定义函数和条件判断语句 */}
        {/* 调用自定义函数返回jsx进行展示 */}
        {getArticleTem()}
        {/* 调用函数，有默认参数事件对象e */}
        <button onClick={clickHanlder}>按钮</button>
        {/* 自定义传参 */}
        <button onClick={() => clickHanlder('wwx')}>按钮</button>
        {/* 同时给函数传递自定义参数和事件对象e */}
        <button onClick={(e) => clickHanlder('wwx', e)}>按钮</button>

        {/* 自定义组件使用 */}
        {/* 单标签 */}
        <Button />
        {/* 双标签 */}
        <Button></Button>

        <List />

        <div>
          <button onClick={handlerclick}>{count}</button>
        </div>
        <button onClick={clickForm}>改变name{from.name}</button>
        <button onClick={changeFrom}>改变name1{from.name}</button>

        <hr />
        {/* 行内样式 */}
        <span style={{ fontSize: '18px', color: 'red' }}>this is a span</span>
        {/* 行内样式变量 */}
        <span style={style}>this is a span</span>
        {/* 类名控制 */}
        <span className="spanclass">this is a span</span>
      </div>
    </>
  )
}

export default App
